<template>
	<view class="consult-customer-content">
		<!-- 时间轴 -->
		<time-line />
		<view class="cat-head">
			<!-- 未确认 -->
			<icon class="icon-WQR" v-if="detail.if_confirm == 0"></icon>
			<!-- 已确认 -->
			<icon class="icon-YQR" v-else-if="detail.if_confirm == 1"></icon>
			<!-- 已出售 -->
			<icon class="icon-YCS" v-else></icon>
			<image :src="detail.img ? `${IMG_URL + detail.img}` : detail.cover" mode="aspectFill"></image>
		</view>
		<button open-type="contact" class="ke_fu_line" v-if="detail.if_confirm != 1">
			<text>*</text>
			请先
			<text>咨询客服</text>
			确认猫咪是否可购买
		</button>
		<view class="ke_fu_line" v-else>亲，请先填写购买猫咪申请表</view>
		<button class="tianXieSQB" @click="goToApply" :style="{ backgroundColor: detail.if_confirm != 1 ? '#999999' : '' }">填写申请表</button>
	</view>
</template>

<script>
const app = getApp();
import TimeLine from '../components/timeLine/timeLine.vue';
import { catConfirm } from '@/api/buyCat.js';
export default {
	components: {
		TimeLine
	},
	data() {
		return {
			IMG_URL: app.globalData.IMG_URL,
			goods_id: '', // 商品id
			detail: {}
		};
	},
	methods: {
		// 获取猫咪信息
		async catConfirm() {
			const res = await catConfirm({
				goods_id: this.goods_id
			});
			this.detail = res;
		},
		// 跳转猫咪申请
		goToApply() {
			if (this.detail.if_confirm != 1) {
				uni.showToast({
					title: '请咨询客服',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			uni.navigateTo({
				url: `/pagesBuyCat/applyForCat/applyForCat?goods_id=${this.goods_id}`
			});
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.catConfirm();
	}
};
</script>

<style scoped lang="scss">
.consult-customer-content {
	padding-top: 340rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.cat-head {
		width: 360rpx;
		height: 360rpx;
		border-radius: 20rpx;
		// overflow: hidden;
		margin-bottom: 30rpx;
		position: relative;
		& > icon {
			position: absolute;
			right: 0;
			top: 0;
			width: 134rpx;
			height: 128rpx;
		}
		.icon-WQR {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-bug-WQR.png) no-repeat;
			background-size: cover;
		}
		.icon-YQR {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-bug-YQR.png) no-repeat;
			background-size: cover;
		}
		.icon-YCS {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-bug-YCS.png) no-repeat;
			background-size: cover;
		}
		& > image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
	.ke_fu_line {
		background: transparent;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 20px;
		& > text {
			color: #fa8384;
		}
	}
	.tianXieSQB {
		width: 470rpx;
		height: 72rpx;
		background: #fa8384;
		border-radius: 12rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}
}
</style>
